<template>
  <div class="intro-container" :class="{active:focus}">
    <img class="shadow" src="@/assets/images/tbkt/msgkk/shadow.png" alt>
    <scroll-container ref="scrollContainer">
      <div class="intro" data-index="tar_1_0">
        <div class="intro-group">
          <span class="intro-item">姓名</span>
          <span>{{groupData.text.split('#')[0]}}</span>
        </div>
        <div class="intro-group">
          <span class="intro-item">性别</span>
          <span>{{groupData.text.split('#')[1]}}</span>
        </div>
        <div class="intro-group">
          <span class="intro-item">学科</span>
          <span>{{groupData.text.split('#')[2]}}</span>
        </div>
        <div class="content-group">
          <div class="intro-item">个人简介</div>
          <div class="intro-content" v-html="groupData.extenddata.replace(/[#]/g,'<br>')"></div>
        </div>
      </div>
    </scroll-container>
    <p class="tip">按“上、下”键，翻页</p>
  </div>
</template>
<script>
import scrollContainer from "@/components/base/scroll-container/scroll-container";
import multiList from "@/components/base/multi-list/multi-list";
import imglist_w312 from "../ImgList_w312";
export default {
  components: {
    scrollContainer,
    multiList,
    imglist_w312
  },
  props: ["groupData"],
  methods: {
    scrollTo(targetIndex) {
      // console.log("targetIndex", targetIndex);
      let group = targetIndex.split("_")[0];
      if (group == 0) {
        return;
      }
      this.$refs.scrollContainer.scrollTo(targetIndex);
    }
  },
  created() {
    let that = this;
    new fObject(
      1,
      0,
      null,
      () => {
        that.$refs.scrollContainer.scrollBy(200);
      },
      () => {
        that.$refs.scrollContainer.scrollBy(-200);
      },
      "0-0",
      null
    );
    this.hs.fObjCommit();
    this.hs.addFocus([1], (group, objid, objindex) => {
      this.focus = true;
    });
    this.hs.addBlur([1], (group, objid, objindex) => {
      this.focus = false;
    });
  },
  data() {
    return {
      groups: [1],
      scrollY: 0,
      focus: false,
      backObjName: "msjs-intro",
      hs: this.$store.state.hs,
      head: {
        left: "0-0"
      }
    };
  }
};
</script>
<style lang="less" scoped>
.active {
  border: 2px solid #ffffff !important;
}
.intro-container {
  margin-top: 184px;
  // margin-left: 80px;
  width: 1277px;
  height: 774px;
  border-radius: 10px;
  border: solid 2px #74c1e5;
  background: #74c1e5;
  position: relative;
  .tip {
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 26px;
    color: #fff;
    height: 80px;
    line-height: 42px;
  }
  .shadow {
    width: 100%;
    position: absolute;
    height: 56px;
    z-index: 99;
    bottom: 0;
  }
  .content {
    overflow: hidden;
    .intro {
      padding: 48px;
      display: flex;
      flex-direction: column;
      .intro-group {
        display: flex;
        align-items: center;
        font-size: 38px;
        color: #242424;
      }
      .content-group {
        margin-top: 10px;
      }
      .intro-item {
        font-size: 20px;
        height: 30px;
        display: inline-block;
        line-height: 30px;
        border-radius: 15px;
        background-color: #09508a;
        color: #53cfff;
        padding: 0 15px;
        flex-shrink: 0;
        margin-right: 10px;
      }
      .intro-content {
        font-size: 30px;
        line-height: 60px;
        /deep/div{
          text-indent: 2em;
        }
      }
    }
  }
}
</style>
